<form [attr.id]="id"
      [formGroup]="formGroup">
  <ng-container *ngFor="let field of config">
    <ng-container [ngTemplateOutlet]="renderFormField"
                  [ngTemplateOutletContext]="{ $implicit: field }">
    </ng-container>
  </ng-container>
</form>

<ng-template #renderFormField
             let-field>
  <ng-container [ngSwitch]="field.type">
    <ng-template [ngSwitchCase]="'button'">
      <omv-form-button class="omv-display-flex"
                       [config]="field"
                       [formGroup]="formGroup">
      </omv-form-button>
    </ng-template>

    <ng-template [ngSwitchCase]="'iconButton'">
      <omv-form-icon-button class="omv-display-flex"
                            [config]="field"
                            [formGroup]="formGroup">
      </omv-form-icon-button>
    </ng-template>

    <ng-template [ngSwitchCase]="'textInput'">
      <omv-form-text-input class="omv-display-flex"
                           [config]="field"
                           [formGroup]="formGroup">
      </omv-form-text-input>
    </ng-template>

    <ng-template [ngSwitchCase]="'tagInput'">
      <omv-form-tag-input class="omv-display-flex"
                          [config]="field"
                          [formGroup]="formGroup">
      </omv-form-tag-input>
    </ng-template>

    <ng-template [ngSwitchCase]="'numberInput'">
      <omv-form-number-input class="omv-display-flex"
                             [config]="field"
                             [formGroup]="formGroup">
      </omv-form-number-input>
    </ng-template>

    <ng-template [ngSwitchCase]="'binaryUnitInput'">
      <omv-form-binary-unit-input class="omv-display-flex"
                                  [config]="field"
                                  [formGroup]="formGroup">
      </omv-form-binary-unit-input>
    </ng-template>

    <ng-template [ngSwitchCase]="'folderBrowser'">
      <omv-form-folderbrowser class="omv-display-flex"
                              [config]="field"
                              [formGroup]="formGroup">
      </omv-form-folderbrowser>
    </ng-template>

    <ng-template [ngSwitchCase]="'checkbox'">
      <omv-form-checkbox class="omv-display-flex"
                         [config]="field"
                         [formGroup]="formGroup">
      </omv-form-checkbox>
    </ng-template>

    <ng-template [ngSwitchCase]="'passwordInput'">
      <omv-form-password-input class="omv-display-flex"
                               [config]="field"
                               [formGroup]="formGroup">
      </omv-form-password-input>
    </ng-template>

    <ng-template [ngSwitchCase]="'textarea'">
      <omv-form-textarea class="omv-display-flex"
                         [config]="field"
                         [formGroup]="formGroup">
      </omv-form-textarea>
    </ng-template>

    <ng-template [ngSwitchCase]="'select'">
      <omv-form-select class="omv-display-flex"
                       [config]="field"
                       [formGroup]="formGroup">
      </omv-form-select>
    </ng-template>

    <ng-template [ngSwitchCase]="'sharedFolderSelect'">
      <omv-form-sharedfolder-select class="omv-display-flex"
                                    [config]="field"
                                    [formGroup]="formGroup">
      </omv-form-sharedfolder-select>
    </ng-template>

    <ng-template [ngSwitchCase]="'sshCertSelect'">
      <omv-form-sshcert-select class="omv-display-flex"
                               [config]="field"
                               [formGroup]="formGroup">
      </omv-form-sshcert-select>
    </ng-template>

    <ng-template [ngSwitchCase]="'sslCertSelect'">
      <omv-form-sslcert-select class="omv-display-flex"
                               [config]="field"
                               [formGroup]="formGroup">
      </omv-form-sslcert-select>
    </ng-template>

    <ng-template [ngSwitchCase]="'divider'">
      <omv-form-divider class="omv-display-flex"
                        [config]="field"
                        [formGroup]="formGroup">
      </omv-form-divider>
    </ng-template>

    <ng-template [ngSwitchCase]="'paragraph'">
      <omv-form-paragraph class="omv-display-flex"
                          [config]="field"
                          [formGroup]="formGroup">
      </omv-form-paragraph>
    </ng-template>

    <ng-template [ngSwitchCase]="'datePicker'">
      <omv-form-datepicker class="omv-display-flex"
                           [config]="field"
                           [formGroup]="formGroup">
      </omv-form-datepicker>
    </ng-template>

    <ng-template [ngSwitchCase]="'datatable'">
      <omv-form-datatable class="omv-display-flex"
                          [config]="field"
                          [formGroup]="formGroup">
      </omv-form-datatable>
    </ng-template>

    <ng-template [ngSwitchCase]="'slider'">
      <omv-form-slider class="omv-display-flex"
                       [config]="field"
                       [formGroup]="formGroup">
      </omv-form-slider>
    </ng-template>

    <ng-template [ngSwitchCase]="'container'">
      <div class="omv-form-container omv-box-border omv-display-flex omv-flex-row omv-gap-3 omv-align-items-baseline">
        <div *ngFor="let innerField of field.fields"
             class="omv-form-container-item omv-max-w-{{ innerField.flex ?? 'none' }}"
             [ngClass]="{'omv-flex-grow': innerField.flex, 'omv-flex-1': !innerField.flex }">
          <ng-container [ngTemplateOutlet]="renderFormField"
                        [ngTemplateOutletContext]="{ $implicit: innerField }">
          </ng-container>
        </div>
      </div>
    </ng-template>

    <ng-template [ngSwitchCase]="'fileInput'">
      <omv-form-file-input class="omv-display-flex"
                           [config]="field"
                           [formGroup]="formGroup">
      </omv-form-file-input>
    </ng-template>

    <ng-template [ngSwitchCase]="'hint'">
      <omv-form-hint class="omv-display-flex"
                     [config]="field"
                     [formGroup]="formGroup">
      </omv-form-hint>
    </ng-template>

    <ng-template [ngSwitchCase]="'codeEditor'">
      <omv-form-code-editor class="omv-display-flex"
                            [config]="field"
                            [formGroup]="formGroup">
      </omv-form-code-editor>
    </ng-template>
  </ng-container>
</ng-template>
